<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插入标记</title>
</head>
<body>
<div id="app">
    <p class="title">我是一名程序员<strong>我有些厌烦我的工作</strong>，原因如下</p>
    <ul class="content">
        <li>一，经常加班</li>
        <li>二，工作复杂繁琐</li>
        <li>三，要熬夜</li>
    </ul>
</div>
</body>
<script>
    /**1.原因：HTML5 将 IE 发明的 innerHTML 和 outerHTML 纳入了标准，但还有两个属性没有入选。这两个剩下的属性是 innerText 和 outerText。
     * **/

    /**2. innerText 属性:innerText 属性对应元素中包含的所有文本内容，无论文本在子树中哪个层级。在用于读取值时，innerText 会按照深度优先的顺序
     *   将子树中所有文本节点的值拼接起来。在用于写入值时，innerText会移除元素的所有后代并插入一个包含该值的文本节点。
     *   a.注意不同浏览器对待空格的方式不同，因此格式化之后的字符串可能包含也可能不包含原始 HTML代码中的缩进。
     *   b.设置 innerText 会移除元素之前所有的后代节点，完全改变 DOM 子树。此外，设置 innerText也会编码出现在字符串中的 HTML 语法字符（小于
     *     号、大于号、引号及和号）。
     *   c.因为设置 innerText 只能在容器元素中生成一个文本节点，所以为了保证一定是文本节点，就必须进行 HTML 编码。innerText 属性可以用于去除
     *     HTML 标签。通过将 innerText 设置为等于 innerText，可以去除所有 HTML 标签而只剩文本
     *     div.innerText = div.innerText;
           执行以上代码后，容器元素的内容只会包含原先的文本内容。
     *
     * **/
    //1.获取 innerText 内容
    let divDOM = document.getElementById('app');
    console.log(divDOM.innerText);
    // 我是一名程序员我有些厌烦我的工作，原因如下
    //
    // 一，经常加班
    // 二，工作复杂繁琐
    // 三，要熬夜
    //2.采用 innerText 设置文本节点
    divDOM.innerText = 'Hello World!!!';
    //Hello World!!!
    //HTML 字符转义
    divDOM.innerText = "Hello & welcome, <b>\"reader\"!</b>";
    //Hello & welcome, <b>"reader"!</b>

    /** 3. outerText 属性(忽略)
     *     a.outerText 与 innerText 是类似的，只不过作用范围包含调用它的节点。要读取文本值时，outerText 与 innerText 实际上会返回同样的内
     *       容。但在写入文本值时，outerText 就大不相同了。写入文本值时，outerText 不止会移除所有后代节点，而是会替换整个元素。
     *     b.div.outerText = "Hello world!";这行代码的执行效果就相当于以下两行代码：
     *       let text = document.createTextNode("Hello world!");
     *       div.parentNode.replaceChild(text, div);
     *     c.本质上，这相当于用新的文本节点替代 outerText 所在的元素。此时，原来的元素会与文档脱离关系，因此也无法访问。
     *     d.outerText 是一个非标准的属性，而且也没有被标准化的前景。因此，不推荐依赖这个属性实现重要的操作。除 Firefox 之外所有主流浏览器都支
     *       持 outerText。
     *
     * **/



</script>
</html>